/**
* 功能描述: 数值输入框demo
* @author 崔孝楠
* @date 2022/9/27 17:39
* @version 1.0
*/
<template>
  <div>
    <!-- 添加前缀 -->
    <div class="yw-input-number-wrapper" id="yw-input-number-fix" style="margin-bottom: 10px">
      <span class="yw-input-number-prefix">
        ￥
      </span>
      <yw-base-number @focus="addFocused('yw-input-number-fix')" @blur="removeFocused('yw-input-number-fix')" />
    </div>

    <!-- 添加前置后置标签 -->
    <span class="yw-input-group-wrapper">
      <span class="yw-input-group" >
        <span class="yw-input-group-addon">+</span>
        <yw-base-number />
        <span class="yw-input-group-addon">$</span>
      </span>
    </span>
  </div>

</template>

<script>
import YwBaseNumber from "../Number/index.vue";
export default {
  name: "index",
  components: {
    YwBaseNumber
  },
  methods: {
    /**
     * 添加选中时样式
     */
    addFocused(id) {
      let inputNumberDiv = document.getElementById(id)
      inputNumberDiv.classList.add('yw-input-number-affix-wrapper-focused')
    },
    /**
     * 移除选中时样式
     */
    removeFocused(id) {
      let inputNumberDiv = document.getElementById(id)
      inputNumberDiv.classList.remove('yw-input-number-affix-wrapper-focused')
    }
  }
}
</script>

<style scoped>

</style>
